<template>
	<view class="container">
		<!-- Search Bar -->
		<view class="search-bar">
			<text>定位城市</text>
		</view>
		<!-- Located City Section -->
		<view class="located-city">
			<button class="left-align">焦作</button>
			<navigator class="city-buttons">
				<text>重新定位</text>
			</navigator>
		</view>
		<!-- Popular Cities Section -->
		<view class="popular-cities">
			<text>热门城市</text>
			<view class="city-grid">
				<button>北京</button>
				<button>上海</button>
				<button>广州</button>
				<button>深圳</button>
				<button>杭州</button>
				<button>南京</button>
				<button>武汉</button>
				<button>武汉</button>
				<button>武汉</button>
			</view>
		</view>

		<!-- Indexed List -->
		<view>
			<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
		</view>
	</view>
</template>

<script>
	import cities from '@/common/cities.js'
	export default {
		components: {},
		data() {
			return {
				list: cities.list
			}
		},
		methods: {
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			}
		}
	}
</script>

<style>
	.search-bar {
		padding: 10px;
	}

	.search-bar>text {
		margin-left: 15rpx;
		color: #adadad;
	}

	.located-city,
	.popular-cities {
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	button {
		padding: 0.1px 18px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.city-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.city-grid button {
		width: 200rpx;
		font-weight: bold;
		font-size: 25rpx;
	}

	.located-city button {
		width: 200rpx;
		font-weight: bold;
		font-size: 25rpx;
	}

	.city-buttons {
		float: right;
		font-weight: bold;
		color: #4196e5;
		margin-top: -55rpx;
	}

	.left-align {
		margin-left: 12rpx;
	}

	.popular-cities>text {
		color: #adadad;
		margin-left: 15rpx;
		display: block;
		margin-bottom: 10rpx;
	}
</style>